<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>箭头函数 | 老陈打码</title>
    <meta name="description" content="帅气的老陈！">
    <link rel="stylesheet" href="/vitepress/assets/style.019f39fc.css">
    <link rel="modulepreload" href="/vitepress/assets/Home.a8074dce.js">
    <link rel="modulepreload" href="/vitepress/assets/app.b6df9136.js">
    <link rel="modulepreload" href="/vitepress/assets/base_js1.md.ffbccfa8.lean.js">
    <link rel="modulepreload" href="/vitepress/assets/app.b6df9136.js">
    <link rel="icon" href="/img/logo.png">
    <meta name="twitter:title" content="箭头函数 | 老陈打码">
    <meta property="og:title" content="箭头函数 | 老陈打码">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vitepress/" aria-label="老陈打码, back to home" data-v-675d8756 data-v-4a583abe><!----> 老陈打码</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/vitepress/" data-v-b8818f8c>首页 <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/vitepress/about/" data-v-b8818f8c>关于 <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/vitepress/laochen.html" data-v-b8818f8c>关于老陈 <!----></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/vitepress/" data-v-b8818f8c>首页 <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/vitepress/about/" data-v-b8818f8c>关于 <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/vitepress/laochen.html" data-v-b8818f8c>关于老陈 <!----></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><a class="sidebar-link-item" href="/vitepress/base/">前端基础</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vitepress/">Vue</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/vitepress/base/js1">JavaScript</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#箭头函数">箭头函数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#注意点-与普通函数的差异">注意点&amp;与普通函数的差异</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#无this的强绑定">无this的强绑定</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#没有arguments">没有arguments</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#无原型-不能使用-new-没有super">无原型 &amp; 不能使用 new &amp; 没有super</a><!----></li></ul></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vitepress/base/js2">RAF</a><!----></li><!--]--></ul><!--[--><!--]--></aside><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h2 id="箭头函数" tabindex="-1">箭头函数 <a class="header-anchor" href="#箭头函数" aria-hidden="true">#</a></h2><p>箭头函数是在es6中引入的，用法十分简单，允许使用 <code>=&gt;</code> 定义函数</p><p><img src="/vitepress/assets/119A.10a1d9ee.gif" alt=""></p><div class="language-javascript"><pre><code><span class="token comment">// 箭头函数</span>
<span class="token keyword">const</span> <span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">//TODO: 函数体</span>
  <span class="token keyword">return</span> <span class="token string">&quot;箭头函数&quot;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 相当于</span>
<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">//TODO: 函数体</span>
  <span class="token keyword">return</span> <span class="token string">&quot;箭头函数&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>另一个用法上的简化是返回值，像上述函数直接返回值的时候可以写成这样</p><div class="language-javascript"><pre><code><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&quot;箭头函数&quot;</span>
</code></pre></div><p>如果直接返回的值是一个对象，需要注意一下，写法有所不同</p><div class="language-javascript"><pre><code><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>bar<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>另外还可以配合rest参数使用</p><div class="language-javascript"><pre><code><span class="token punctuation">(</span><span class="token parameter">header<span class="token punctuation">,</span><span class="token operator">...</span>rest</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> header <span class="token comment">// 返回第一个参数</span>
</code></pre></div><h2 id="注意点-与普通函数的差异" tabindex="-1">注意点&amp;与普通函数的差异 <a class="header-anchor" href="#注意点-与普通函数的差异" aria-hidden="true">#</a></h2><h3 id="无this的强绑定" tabindex="-1">无this的强绑定 <a class="header-anchor" href="#无this的强绑定" aria-hidden="true">#</a></h3><p>箭头函数无this的强绑定，一般在定义函数的时候确定而不是在执行函数的时候确定</p><div class="language-javascript"><pre><code><span class="token comment">// 普通函数</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;id:&#39;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> id <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token function">foo</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// id: undefined</span>
<span class="token comment">// 箭头函数</span>
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    
  <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;id:&#39;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> id <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>

<span class="token function">foo</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// id: 2</span>
</code></pre></div><p>普通函数 <code>this</code> 在普通函数中是函数执行时所在环境的this指向，100ms延时之后执行函数，此时指向 <code>window</code> 所以返回 <code>undefined</code> 箭头函数 <code>this</code> 在箭头函数中总是指向函数定义生效时所在的对象，这里用 <code>call</code> 绑定了foo函数执行时的this指向，所以，在箭头函数定义时 <code>this</code> 为 <code>{id:2}</code> 所以返回 <code>2</code></p><h3 id="没有arguments" tabindex="-1">没有arguments <a class="header-anchor" href="#没有arguments" aria-hidden="true">#</a></h3><p>箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象：</p><div class="language-javascript"><pre><code><span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">res</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
</code></pre></div><p>那如果我们就是要访问箭头函数的参数呢？ 你可以通过命名参数或者 rest 参数的形式访问参数:</p><div class="language-javascript"><pre><code><span class="token keyword">let</span> <span class="token function-variable function">res</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>rest</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> rest<span class="token punctuation">;</span>
</code></pre></div><h3 id="无原型-不能使用-new-没有super" tabindex="-1">无原型 &amp; 不能使用 new &amp; 没有super <a class="header-anchor" href="#无原型-不能使用-new-没有super" aria-hidden="true">#</a></h3><p>不能使用new操作符</p><div class="language-javascript"><pre><code><span class="token keyword">var</span> <span class="token function-variable function">Foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// TypeError: Foo is not a constructor</span>
</code></pre></div><p><a href="https://segmentfault.com/a/1190000012397072" target="_blank" rel="noopener noreferrer">javascript中Function、ArrowFunction和GeneratorFunction介绍</a></p><p>由于不能使用 new 调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在 prototype 这个属性。</p><div class="language-javascript"><pre><code><span class="token keyword">var</span> <span class="token function-variable function">Foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Foo</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined复制代码</span>
</code></pre></div><p>没有原型自然也不能通过 <code>super</code> 来访问原型的属性，所以箭头函数也是没有 <code>super</code> 的，不过跟 <code>this</code> 、 <code>arguments</code> 一样，这些值由外围最近一层非箭头函数决定。</p></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-fb8d84c6><div class="edit" data-v-fb8d84c6><div class="edit-link" data-v-fb8d84c6 data-v-1ed99556><!----></div></div><div class="updated" data-v-fb8d84c6><!----></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/vitepress/base/" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>前端基础</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/vitepress/base/js2" data-v-38ede35f><span class="text" data-v-38ede35f>RAF</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"base_index.md\":\"c26fea2a\",\"base_js1.md\":\"ffbccfa8\",\"base_js2.md\":\"2d43ab98\",\"index.md\":\"aaaa67f5\"}")</script>
    <script type="module" async src="/vitepress/assets/app.b6df9136.js"></script>
    
  </body>
</html>